import "./index.scss";
import { Collapse, message, Progress } from "antd";
import { Link, useLocation } from "react-router-dom";
import { useState, useEffect } from "react";
import { availableAtion } from "@/store/createAction";
import { useSelector, useDispatch } from "react-redux";
import {formatImageSizeText} from "@/utils/index"

const Aside = () => {
  const location = useLocation();
  const path = location.pathname;
  const { Panel } = Collapse;
  const [progress, setProgress] = useState(0);
  const { panSpace } = JSON.parse(localStorage.getItem("userInfo"));
  const dispatch = useDispatch();
  const availableSpace = useSelector((state) => state?.loginReducer.availableSpace);

  useEffect(() => {
    const available = async () => dispatch(await availableAtion());
    available();
    return () => {};
  }, []);

  useEffect(() => {
    setProgress(
      Math.floor(
        ((panSpace?.capacity - availableSpace) / panSpace?.capacity) * 100
      )
    );
  }, [availableSpace]);
  const menu = [
    {
      id: 1,
      title: "我的文件",
      path: "/file",
      children: [
        {
          id: 10001,
          title: "全部",
          path: "/all",
        },
        {
          id: 10002,
          title: "图片",
          path: "/pic",
        },
        {
          id: 10003,
          title: "文档",
          path: "/doc",
        },
        {
          id: 10004,
          title: "视频",
          path: "/video",
        },
        {
          id: 10005,
          title: "音乐",
          path: "/music",
        },
        {
          id: 10006,
          title: "其他",
          path: "/other",
        },
      ],
    },
    {
      id: 2,
      title: "回收站",
      path: "/bin",
    },
  ];
  const subMenuItem = (item) => {
    return item.children.map((subItem) => {
      const linkPath = `/pan${item.path}${subItem.path}`;
      return (
        <Link to={linkPath} key={subItem.id}>
          <div className={`subMenuItem ${path === linkPath ? "active" : ""}`}>
            {subItem.title}
          </div>
        </Link>
      );
    });
  };
  const menuItem = menu.map((item) => {
    const linkPath = `/pan${item.path}`;
    if (item.children) {
      return (
        <Collapse
          defaultActiveKey={["1"]}
          ghost
          expandIconPosition="end"
          key={item.id}
        >
          <Panel header={item.title} key={item.id}>
            {subMenuItem(item)}
          </Panel>
        </Collapse>
      );
    }
    return (
      <Link to={linkPath} key={item.id}>
        <div className={`menuItem ${linkPath === path ? "active" : ""}`}>
          {item.title}
        </div>
      </Link>
    );
  });

  const capacity = panSpace?.capacity ? panSpace.capacity : 0;
  const available = availableSpace ? capacity - availableSpace : 0;


  return (
    <div className="aside-box">
      <div className="menu">{menuItem}</div>
      <div className="bottom-bar">
        <Progress
          showInfo={false}
          strokeColor={{
            "0%": "#108ee9",
            "100%": "#87d068",
          }}
          percent={progress}
        />
        <div className="bar-desc">
          <div className="store">存储</div>
          <div className="capacity">
            {/* {`${(
              (panSpace?.capacity - availableSpace) /
              Math.pow(1024, 2)
            ).toFixed(2)}MB`}{" "}
            /{`${(panSpace?.capacity / Math.pow(1024, 2)).toFixed(2)}MB`} */}

           {formatImageSizeText(available)}
            /
            {formatImageSizeText(capacity)}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Aside;
